<!--
 * @Date         : 2024-03-01 20:29:20
 * @LastEditTime : 2024-03-09 16:42:08
 * @description  : 答题页面
-->
<script setup>
import Header from "../components/Header.vue";
import Popup from "../components/Popup.vue";
import PopupCode from "../components/PopupCode.vue";
import imgT from "../assets/1708570277524.png";
import { getPrescriptionProblem, subTrainAnswer, subTrainExam } from "@/api";
import router from "@/router";
import { useRoute } from "vue-router";
const route = useRoute();
const RefPopup = ref("");
const RefPopupCode = ref("");
// 答题提示
const tipList = ref([
  {
    color: "#855c4c",
    text: "已答题",
  },
  {
    color: "#652E1B",
    text: "在答",
  },
  {
    color: "#FFFFFF",
    text: "未答",
  },
  {
    color: "#F1A72E",
    text: "标记",
  },
]);
let problemList = ref([]);
let allProblemList = ref([]);
let isSidebar = ref(false);
let afootPro = ref({}); //正在答题
// 弹窗剩余
const onPopupShow = (config) => {
  RefPopup.value.show(config);
};
const onTipPopupShow = () => {
  RefPopupCode.value.show();
};

// 获取题目
const getList = async () => {
  let { id } = route.query;
  let newProblemObj = JSON.parse(sessionStorage.getItem("problemList")) || "";
  isSidebar.value = false;
  let problemArr = [];
  if (newProblemObj) {
    problemArr = newProblemObj;
  } else {
    let res = await getPrescriptionProblem({ prescription_id: id });
    sessionStorage.setItem("problemList", JSON.stringify(res.data));
    // sessionStorage.setItem(
    //   "problemInfo",
    //   exam_info || JSON.stringify(exam_info)
    // );
    problemArr = problem;
  }
  let list = [];
  let allArr = [];
  let allArrProIndex = -1;
  problemArr = problemArr.map((item, index, arr) => {
    allArrProIndex = allArrProIndex + 1;
    return {
      ...item,
      // probleTitle: key,
      problemNum: arr.length,
      problemIndex: index + 1,
      allArrProIndex: allArrProIndex,
      isSign: item?.isSign || false, //是否标记
      answerValue: item?.answerValue || [], //答案
    };
  });
  console.log(problemArr, "原始数据");
  // for (const key in problemArr) {
  //   if (Object.hasOwnProperty.call(problemArr, key)) {
  //     const element = problemArr[key];

  //     list.push({
  //       probleTitle: key,
  //       list: newArr,
  //     });
  //     allArr.push(...newArr);
  //   }
  // }
  allProblemList.value = problemArr; //所欲题目
  problemList.value = problemArr;
  afootPro.value = problemArr[0]; //当前题目
  isSidebar.value = true;
};
// 更新数据
const upDataLsit = () => {
  let newProblemObj = JSON.parse(sessionStorage.getItem("problemList")) || "";
  console.log(newProblemObj, "原始数据");
  isSidebar.value = false;
  let problemArr = newProblemObj;
  let list = [];
  let allArr = [];
  let allArrProIndex = -1;
  allArr = newProblemObj.map((item, index, arr) => {
    allArrProIndex = allArrProIndex + 1;
    return {
      ...item,
      probleTitle: key,
      problemNum: arr.length,
      problemIndex: index + 1,
      allArrProIndex: allArrProIndex,
      isSign: item?.isSign || false, //是否标记
      answerValue: item?.answerValue || [], //答案
    };
  });
  // for (const key in problemArr) {
  //   if (Object.hasOwnProperty.call(problemArr, key)) {
  //     const element = problemArr[key];
  //     let newArr = element.map((item, index, arr) => {
  //       allArrProIndex = allArrProIndex + 1;
  //       return {
  //         ...item,
  //         probleTitle: key,
  //         problemNum: arr.length,
  //         problemIndex: index + 1,
  //         allArrProIndex: allArrProIndex,
  //         isSign: item?.isSign || false, //是否标记
  //         answerValue: item?.answerValue || [], //答案
  //       };
  //     });
  //     list.push({
  //       probleTitle: key,
  //       list: newArr,
  //     });
  //     allArr.push(...newArr);
  //   }
  // }
  allProblemList.value = allArr; //所欲题目
  problemList.value = list;
};
// 获取验证码
const getCodeVlue = (value) => {
  console.log(value);
};

// 选择题目
const onActivePro = async (v) => {
  await onSubAnswer();
  afootPro.value = v;
  upDataLsit();
};
// 下一题
const onNextPro = () => {
  let alllist = allProblemList.value;
  let index = afootPro.value?.allArrProIndex + 1;
  if (alllist.length > index) {
    afootPro.value = alllist[index];
    onSubAnswer();
    upDataLsit();
  } else {
    ElMessage({
      showClose: true,
      message: "当前已是最后一道题",
      type: "warning",
    });
  }
};
// 上一题
const onLastPro = () => {
  let alllist = allProblemList.value;
  let index = afootPro.value?.allArrProIndex - 1;
  if (index < 0) {
    ElMessage({
      showClose: true,
      message: "当前已是第一道题",
      type: "warning",
    });
    return;
  }
  if (alllist.length > index) {
    afootPro.value = alllist[index];
    upDataLsit();
  } else {
    ElMessage({
      showClose: true,
      message: "当前已是第一道题",
      type: "warning",
    });
  }
};
// 标记
const onSign = () => {
  let newProblemObj = JSON.parse(sessionStorage.getItem("problemList")) || "";
  let key = afootPro.value.allArrProIndex;
  let id = afootPro.value.id;
  afootPro.value.isSign = !afootPro.value.isSign;
  newProblemObj[key] = newProblemObj[key].map((item) => {
    if (item.id == id) {
      return {
        ...item,
        isSign: !item?.isSign,
      };
    } else {
      return item;
    }
  });
  console.log(newProblemObj, "编辑答案");
  sessionStorage.setItem("problemList", JSON.stringify(newProblemObj));
};
// 编辑答案
const onAnswerChange = (value) => {
  value = value.sort();
  let newProblemObj = JSON.parse(sessionStorage.getItem("problemList")) || "";
  let key = afootPro.value.allArrProIndex;
  let id = afootPro.value.id;
  newProblemObj[key] = newProblemObj[key].map((item) => {
    if (item.id == id) {
      return {
        ...item,
        answerValue: value,
      };
    } else {
      return item;
    }
  });
  console.log(newProblemObj, value, "编辑答案");
  sessionStorage.setItem("problemList", JSON.stringify(newProblemObj));
};

// 点击 交卷
const onClickSub = () => {
  let list = allProblemList.value;
  var count = list.reduce(function (acc, cur) {
    return cur.answerValue?.length <= 0 ? acc + 1 : acc;
  }, 0);
  // 还有多少题没有答
  if (count > 0) {
    onPopupShow({
      text: `剩余${count}题目未答，是否继续提交`,
    });
  } else {
    onSubExam();
  }
};
// 交卷
const onSubExam = async () => {
  let { id: exam_id } = JSON.parse(sessionStorage.getItem("examInfo")) || "";
  let { exam_log_id } = JSON.parse(sessionStorage.getItem("problemInfo")) || "";
  let startTime = sessionStorage.getItem("startTime");
  let usetime = +new Date() - startTime;
  await subTrainExam({ exam_id, exam_log_id, usetime });
  router.replace("/result");
};
// 提交答案
const onSubAnswer = async () => {
  return;
  let { id: exam_id } = JSON.parse(sessionStorage.getItem("examInfo")) || "";
  let { exam_log_id } = JSON.parse(sessionStorage.getItem("problemInfo")) || "";
  let { id, answerValue } = afootPro.value;
  let answer = answerValue?.join("") || "";
  if (!answer) return;
  let res = await subTrainAnswer({
    problem_id: id,
    answer,
    exam_id,
    exam_log_id,
  });
};

const onPopupOk = () => {
  console.log("onPopupOk");
  onSubExam();
};
const onPopupNo = () => {
  console.log("onPopupno");
};
onMounted(() => {
  getList();
});
</script>

<template>
  <div class="AnswerPage">
    <Header title="中药处方审核练习" :isHideRight="false" />
    <div class="main">
      <div class="sidebar">
        <!-- 答题提示 -->
        <div class="tip">
          <div class="tip-one" v-for="(v, i) in tipList" :key="i">
            <div class="block" :style="{ background: v.color }"></div>
            {{ v.text }}
          </div>
        </div>
        <!-- 题目 -->
        <div class="topic" key="">
          <div class="topic_one">
            <!-- <div class="title">
              {{ item.probleTitle }}(共{{ problemList.length }}道题)
            </div> -->
            <div class="list">
              <div
                class="list_block"
                v-for="(v, i) in problemList"
                :key="v.id"
                @click="onActivePro(v)"
                :class="{
                  active: v.id === afootPro.id,
                  signStyle: v.isSign,
                  answerStyle: v?.answerValue.length > 0,
                }"
              >
                {{ i + 1 }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 当前题目 -->
      <div class="content" :key="afootPro.id">
        <div class="type-tip">
          <div class="tip-title">
            一、{{ afootPro.prescription_name }}共{{
              problemList.length
            }}题。每一道试题下面有多个备选答案，请从中选择一个或多个答案。
          </div>
          <div class="tip-txt">
            （每个正确选项3分；错选本题不得分；处方中无此类错误选无得1分）
          </div>
        </div>
        <div class="problom-block">
          <div class="left">
            <el-image
              style="width: 300px; height: 351px"
              :src="afootPro.problem_img"
              fit="contain"
            />
          </div>
          <div class="right">
            <div class="pro_num">第 {{ afootPro.problemIndex }} 题：</div>
            <div class="pro_title">{{ afootPro.title }}</div>
            <el-checkbox-group
              v-model="afootPro.answerValue"
              fill="#ccc"
              @change="onAnswerChange"
            >
              <el-checkbox
                v-for="(item, index) in afootPro.ans"
                :key="index"
                :label="item.number"
                :value="item.number"
                >{{ item.number }}.{{ item.content }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </div>
        <div class="bottom">
          <el-button type="primary" color="#652E1B" @click="onLastPro"
            >上一题</el-button
          >
          <el-button type="primary" color="#652E1B" @click="onNextPro"
            >下一题</el-button
          >
          <el-button
            type="primary"
            color="#F1A72E"
            style="color: #ffffff"
            @click="onSign"
            >{{ afootPro.isSign ? "已标记" : "标记" }}</el-button
          >
          <el-button
            type="primary"
            color="#F1A72E"
            style="color: #ffffff"
            @click="onClickSub"
            >交卷</el-button
          >
        </div>
      </div>
    </div>
  </div>
  <!-- 弹窗   剩余题目 -->
  <Popup ref="RefPopup" @ok="onPopupOk" @hide="onPopupNo" />
  <PopupCode @codeVlue="getCodeVlue" ref="RefPopupCode" />
</template>
<style lang="scss" scoped>
.AnswerPage {
  background: #855c4c;
  box-sizing: border-box;
  height: 100vh;
  overflow: auto;
  .main {
    overflow: hidden;
    // margin: 0 10px 10px 10px;
    // border-radius: 10px;
    // background: #f6eee8;
    box-sizing: border-box;
    height: 88vh;
    // padding: 20px;
    display: flex;
    justify-content: space-between;
    .sidebar {
      width: 18vw;
      height: 100%;
      flex-shrink: 0;
      background: #f7f0eb;
      .tip {
        display: flex;
        padding: 20px;
        .tip-one {
          display: flex;
          align-items: center;
          font-weight: 500;
          font-size: 12px;
          color: #666666;
          line-height: 25px;
          text-align: left;
          font-weight: 600;
          margin-right: 10px;
          .block {
            width: 14px;
            height: 14px;
            margin-right: 4px;
            border-radius: 2px 2px 2px 2px;
          }
        }
      }
      .topic {
        overflow-y: auto;
        height: calc(100% - 75px);
        .topic_one {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 0 40px;
          .title {
            width: 100%;
            background: #652e1b;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            padding: 5px 10px;
            letter-spacing: 2px;
          }
          .list {
            display: flex;
            flex-wrap: wrap;
            width: 180px;
            align-items: center;
            margin-top: 10px;
            .list_block {
              cursor: pointer;
              flex-shrink: 0;
              width: 28px;
              height: 28px;
              background: #ffffff;
              border-radius: 2px 2px 2px 2px;
              text-align: center;
              line-height: 28px;
              margin-right: 5px;
              margin-top: 5px;
              border: 1px solid #ccc;
            }
            .active {
              background: #652e1b !important;
              color: #fff;
              border: 1px solid #652e1b;
            }
            .signStyle {
              background: #f1a72e;
              color: #fff;
              border: 1px solid #f1a72e;
            }
            .answerStyle {
              background: #855c4c;
              color: #fff;
              border: 1px solid #855c4c;
            }
          }
        }
      }
    }
    .content {
      background: #fff;
      height: 100%;
      flex: 1;
      box-sizing: border-box;
      padding: 20px;
      display: flex;
      flex-direction: column;
      .type-tip {
        padding-bottom: 30px;
        margin-bottom: 20px;
        flex-shrink: 0;
        border-bottom: 2px dashed var(--el-border-color);
        .tip-title {
          font-weight: bold;
          font-size: 16px;
          color: #652e1b;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
        .tip-txt {
          font-size: 16px;
          margin-top: 5px;
          color: #652e1b;
          line-height: 20px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }
      }
      .problom-block {
        flex: 1;
        overflow: auto;
        display: flex;
        justify-content: space-around;
        .left {
          flex: 1;
          height: 100%;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          border-right: 2px dashed var(--el-border-color);
        }
        .right {
          flex: 1;
          padding: 30px;
          box-sizing: border-box;
          .el-checkbox-group {
            display: flex;
            flex-wrap: wrap;
            margin: 30px;
          }
          .el-checkbox {
            width: 40%;
            white-space: normal;
            word-break: break-all;
            flex-shrink: 0;
          }
        }
      }
      .bottom {
        padding-top: 10px;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
    }
  }
}
.is-checked {
  .el-checkbox__label {
    background: #000;
    color: #666 !important;
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

/* 设置滚动条滑块的背景色和圆角 */
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 5px;
}

/* 设置滚动条滑块在悬停状态下的背景色和圆角 */
::-webkit-scrollbar-thumb:hover {
  background-color: #999;
  border-radius: 5px;
}

/* 设置滚动条轨道的背景色和圆角 */
::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  border-radius: 5px;
}

/* 设置滚动条轨道在悬停状态下的背景色和圆角 */
::-webkit-scrollbar-track:hover {
  background-color: #ccc;
  border-radius: 5px;
}
</style>
